<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #search{
            margin-bottom: 10px;
            padding: 10px 0px;
        }
    </style>
</head>
<body>
<div id="app" class="demo-input-size">

    <div id="search">
        <el-select v-model="searchInfo.newsColumn" placeholder="请选择新闻栏目">
            <el-option
                    v-for="(c,i) in columnArr"
                    :label="c.cname"
                    :value="c.id">
            </el-option>
        </el-select>
        <el-input
                size="medium"
                placeholder="请输入发布人姓名"
                suffix-icon="el-icon-user-solid"
                style="display: inline-block;width: 250px"
                v-model="searchInfo.newsName">
        </el-input>
        <el-select v-model="searchInfo.newsConditionid" placeholder="请选择审核状态">
            <el-option
                    v-for="(c,i) in conditionArr"
                    :label="c.ccondition"
                    :value="c.id">
            </el-option>
        </el-select>

        <el-button type="primary" round icon="el-icon-search" @click="searchNews()">
            搜索
        </el-button>
        <el-button type="primary" round icon="el-icon-refresh" @click="reload"></el-button>
    </div>

    <el-table
            :data="newsArr"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="newsColumn.cname"
                label="新闻栏目"
                width="120">
        </el-table-column>
        <el-table-column
                prop="nuser"
                label="发布人">
        </el-table-column>
        <el-table-column
                prop="title"
                label="新闻标题">
        </el-table-column>
        <el-table-column
                prop="publicDate"
                label="发布时间">
        </el-table-column>
        <el-table-column
                prop="updateDate"
                label="新闻修改时间">
        </el-table-column>

        <el-table-column
                prop="newsCondition.ccondition"
                label="审核状态">
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="350">
            <template slot-scope="scope">
                <el-link @click="showUpdateNews(scope.row.id)">
                    查看<i class="el-icon-view el-icon--right"></i>
                </el-link>
                <span v-if="scope.row.newsCondition.id==1">
                    <el-button  size="small" type="primary" icon="el-icon-success" @click="passCondition(scope.row.id)">
                        通过
                    </el-button>
                    <el-button size="small" type="danger" icon="el-icon-warning" @click="showFailConditionDialog(scope.row.id)">
                        不 通 过
                    </el-button>
                </span>

                <span v-if="scope.row.newsCondition.id==2">
                    <el-button type="success" size="small" disabled>审核通过</el-button>
                    <el-button type="primary" size="small" @click="newsOn(scope.row.id)" plain>新闻上架</el-button>
                </span>

                <span v-if="scope.row.newsCondition.id==3">
                    <el-button type="warning" size="small" @click="checkFailConditionDialog(scope.row.id)" plain>审核不通过，请查看拒绝理由</el-button>
                </span>
                <span v-if="scope.row.newsCondition.id==6">
                    <el-button type="success" size="small" disabled>审核通过</el-button>
                    <el-button type="info" size="small" @click="newsOut(scope.row.id)" plain>新闻下架</el-button>
                    <el-button type="warning" size="small" @click="newsTop(scope.row.id)" plain>新闻置顶</el-button>
                </span>

                <span v-if="scope.row.newsCondition.id==7">
                    <el-button type="success" size="small" disabled>审核通过</el-button>
                    <el-button type="primary" size="small" @click="newsOn(scope.row.id)" plain>新闻上架</el-button>
                </span>
            </template>

        </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>

    <el-dialog title="请说明不通过的原因" :visible.sync="dialogFormVisible">
        <el-form :model="newsInfo" ref="newsInfo">
            <el-form-item label="原因" prop="reasonForReview">
                <el-input v-model="newsInfo.reasonForReview"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="failCondition()">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="不通过的原因" :visible.sync="checkdialogFormVisible">
        <el-form :model="newsInfo" ref="newsInfo">
            <el-form-item prop="reasonForReview">
                <el-input v-model="newsInfo.reasonForReview"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="checkdialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>

</div>
<script>

    var haha = new Vue({
        el:"#app",
        data:{
            searchInfo:{
                newsName:''
            },
            columnArr:[],
            newsArr:[],
            conditionArr:[],
            totalCount:0,
            visible: false,
            dialogFormVisible: false,
            checkdialogFormVisible: false,
            newsInfo:{},
        },
        methods:{
            reload:function () {
                window.location.reload();
            },
            newsTop(id) {
                haha.$confirm('是否置顶 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/demo/newst/newsTop/" + id ,function (backData) {
                        haha.$message.success(backData.msg);
                        getData(1, 10);
                    })
                });
            },
            newsOn(id) {
                haha.$confirm('是否上架 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/demo/newst/newsOn/" + id ,function (backData) {
                        haha.$message.success(backData.msg);
                        getData(1, 10);
                    })
                });
            },
            newsOut(id) {
                haha.$confirm('是否下架 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/demo/newst/newsOut/" + id ,function (backData) {
                        haha.$message.success(backData.msg);
                        getData(1, 10);
                    })
                });
            },
            checkFailConditionDialog(id){
                $.get("/demo/news/getNews/" + id, function (backData) {
                    haha.newsInfo = backData.data;
                    haha.checkdialogFormVisible = true;
                });
            },
            passCondition(id) {
                haha.$confirm('是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/demo/news/updatePassCondition/" + id ,function (backData) {
                        haha.$message.success(backData.msg);
                        getData(1, 10);
                    })
                });
            },
            failCondition(){
                $.post("/demo/news/updateFailCondition",haha.newsInfo,function (backData) {
                    if(backData.code == 1){
                        haha.dialogFormVisible = false;
                        haha.$refs["newsInfo"].resetFields();
                        haha.$message.success('修改成功');
                        getData(1, 10);
                    }else{
                        haha.$message.error('修改失败 请确认数据 或者联系管理员');
                    }
                });
            },
            showFailConditionDialog(id){
                $.get("/demo/news/getNews/" + id, function (backData) {
                    haha.newsInfo = backData.data;
                    haha.dialogFormVisible = true;
                });
            },
            showUpdateNews(id) {
                window.location.href = "/demo/news/viewNewsNontent.html?id=" + id;
            },
            searchNews() {
                getData(1, 10);
            },
            handleCurrentChange(val){
                getData(val, 10);
            },
        }

    });

    function getData(a, b) {
        haha.searchInfo.npageNumber = a;
        haha.searchInfo.pageCount = b;
        $.get("/demo/news/list", haha.searchInfo, function (backData) {
            haha.newsArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
            $.get("/demo/column/newsListNewsColumn", function (backData) {
                haha.columnArr = backData.data;
            });
        });
        $.get("/demo/news/list", haha.searchInfo, function (backData) {
            haha.newsArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
            $.get("/demo/condition/newsConditionList", function (backData) {
                haha.conditionArr = backData.data;
            });
        })
    }
    getData(1,10);

</script>

</body>
</html>